<template>
	<view class="">
		<!-- <DateRangePicker /> -->
		<view class="bg-white padding-sm">
			<date-range-picker @change="dateRangeChange"></date-range-picker>
		</view>
		
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input  :adjust-position="false" type="text" v-model="searchValue" @confirm="getDataList(null)" 
					placeholder="合同监管码或合同编号" confirm-type="search">
				</input> 			
				<text class="input-clear cuIcon-close" v-if="searchValue" @click="searchValue=''"></text>
			</view>
			<view class="action">
				<button class="cu-btn bg-blue shadow-blur round"  @click="getDataList(null)" >搜索</button>
			</view>
		</view>
		
		<mescroll-uni :fixed="false" :down="{atuo: false}" @down="getDataList" :up="{use:false}">
			<view class="list">
				<view class="list-cell" v-for="(item, index) in dataList" :key="index">
					<view class="list-cell-body">
						<view>
							<view>合同监管码：{{ !item.SignCode && item.SignCode !== 0  ? '无' : item.SignCode }}</view>
							<view class="cu-tag line-blue round" @click="hnadelExamineContract(item)">查看合同</view>
						</view>
						<view>
							<view>合同编号：{{ item.ContractCode }}</view>
							<view class="cu-tag line-blue round" @click.stop="handleEditContract(item)">编辑合同</view>
						</view>
						<view>
							<view>创建时间： {{ item.CreateTime.slice(0, 10) }}</view>
							<view class="cu-tag line-red" @click="revocationContract">申请撤销</view>
						</view>
					</view>
					<view>
						<text class="margin-right">状态</text>
						<text class="cu-tag light round" :class="'line-' + contract_color.Status_Color[item.Status]"  >{{ _contract.Status[item.Status + ''] }}</text>		
						<text class="cu-tag light round" :class="'line-' + contract_color.SignStatus_Color[item.SignStatus]" >{{ _contract.SignStatus[item.SignStatus] }}</text>
						<text class="cu-tag light round" :class="'line-' + contract_color.RecordStatus_Color[item.RecordStatus]" >{{ _contract.RecordStatus[item.RecordStatus] }}</text>
					</view>
				</view>
			</view>
		</mescroll-uni>
		
		<pagination 
			:current-page="currentPage" 
			:page-sizes="[7, 10, 15, 25, 30, 40]"
			layout="sizes jumper total"
			@current-change="pageChange"
			:total="total"
		></pagination>
	</view>
</template>

<script>
import DateRangePicker from "@/components/date-range-picker/date-range-picker.vue"
import pagination from '@/components/pagination/pagination'
import { getContractList } from '@/common/api/zft-contract.js'
import { _contract, _contract_color  } from '@/common/config/zft.js'
import { getDate } from '@/common/utils/date.js'
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"

export default {
	components: {
		pagination,
		DateRangePicker,
		MescrollUni
	},
	data () {
		return {
			currentPage: 1,
			pageSize: 7,
			total: 26,
			dataList:  [
            {
                "SignId": "20190725094010_794f4035ab",
                "RoomId": "20190723152822_bcd04f5d96",
                "ContractCode": "1233456",
                "SignCode": null,
                "Status": 1,
                "SignStatus": 101,
                "RecordStatus": 300,
                "CreateTime": "2019-07-25 09:40:10"
            }
        ],
			_contract:  _contract,
			startDate: '',
			endDate: '',
			searchValue: '',
			contract_color: _contract_color
		}
	},
	computed: {
		user() {
			return this.$store.state.user.userList[0]
		}
	},
		
	mounted () {
		this.startDate = getDate(null, -3)
		this.endDate = getDate()
		this.getDataList()
	},
	methods: {
		// 查看合同
		hnadelExamineContract(item) {
			uni.navigateTo({
				url: '/pages/contract-sign/contract-sign?SignId=' + item.SignId
			})
		},
		
		// 获取合同列表
		getDataList(mescroll) {
			let s = {
				// SignType	类型
				SignType: this.$store.state.common.signType.zft,
				// Userid	Userid
				Userid: this.user.Userid,
				// 网签Status	状态
				SignStatus: -1,
				// 备案状态
				RecordStatus: -1,
				// StartDate	开始时间
				StartDate: this.startDate,
				// EndDate	结束时间
				EndDate: this.endDate,
				// Page	页数
				Page: this.currentPage,
				// Size	每页条数
				Size: this.pageSize		
			}
			getContractList(s).then(({data}) => {
				console.log('合同列表请求： ', data)
				//联网成功的回调,隐藏下拉刷新的状态
				if (mescroll) mescroll.endSuccess();
				
				if (data.msgcode == 1000) {
					this.total = data.data.TotalCount
					this.dataList = data.data.ListData
				} else {
					this.showToast(data.msg)
				}
			}).catch(() => {
				//联网失败的回调,隐藏下拉刷新的状态
				if (mescroll) mescroll.endErr();
			})
		},
		// 时间范围改变
		dateRangeChange(e) {
			this.startDate = e.startDate
			this.endDate = e.endDate
		},
		
		pageChange(val) {
			this.currentPage = val
		},
		handleEditContract(item) {
			uni.navigateTo({
				url: "/pages/contract-edit/contract-edit?signId=" + item.SignId + "&roomId=" + item.RoomId
			})
		},
		revocationContract () {
			uni.navigateTo({
				url: '/pages/contract-revocation/contract-revocation',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		
	}
}
</script>

<style lang="scss" scoped>
@import "@/style/mixins/utils.scss";
// 状态颜色 字体大小
$status-color: #ea4a4f;
$status-font-size: 36upx;
$edit-primary-color: #67d915;
// 申请撤销
$repeal-primary-color: #e51c23;
page {
	// background: #fff;
}
.list-cell{
	margin: 20upx 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	// border-radius: 20upx;
	padding: 15upx;
	box-sizing: content-box;
	background: #fff;
	&-body {
		display: flex;
		flex-wrap: wrap;
		>view{
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 15upx 0;
		}
		&-info, &-status {
			width: 50%;
		}
		&-info {
			// float: left;
			
		}
		&-status {
			float: right;
			view {
				// font-size: $status-font-size;
			}
			color: $status-color;
		}
	}
}
</style>
